import React from'react';
import { useNavigate } from 'react-router-dom';
import './FunctionalModules.css';
import tu1 from '../../assets/img/47ba87f3ea9088602bb344003a50dfae.png';
import tu2 from '../../assets/img/68dfa2c87d139f021d51b9f44216a340.png';
import tu3 from '../../assets/img/8690109fe6825477f67cc778eae53741.png';
import tu4 from '../../assets/img/9c8aa05e58ac25d1ee1ff2286c093554.png';
import tu5 from '../../assets/img/9c8aa05e58ac25d1ee1ff2286c093554.png';

// 定义模块数据的类型
interface Module {
    icon: any;
    label: string;
    path: string;
}

// 定义模块数据数组
const modules: Module[] = [
    {
        icon: tu1,
        label: '问专家',
        path: '/yi'
    },
    {
        icon: tu2,
        label: '开列门诊',
        path: '/clinic'
    },
    {
        icon: tu3,
        label: '义诊直播',
        path: '/live'
    },
    {
        icon: tu4,
        label: '健康科普',
        path: '/health'
    },
    {
        icon: tu5,
        label: '商城买药',
        path: '/shop'
    }
];

const FunctionalModules: React.FC = () => {
    const navigate = useNavigate();

    const handleModuleClick = (path: string) => {
        navigate(path);
    };

    return (
        <div className="module-container">
            {modules.map((module, index) => (
                <div
                    key={index}
                    className="module-item"
                    onClick={() => handleModuleClick(module.path)}
                    style={{ cursor: 'pointer' }}
                >
                    <div className="icon-wrapper">
                        <img src={module.icon} alt={module.label} className="module-icon" />
                    </div>
                    <p className="module-label">{module.label}</p>
                </div>
            ))}
        </div>
    );
};

export default FunctionalModules;
    